<template>
  <div class="welcome-container">
    <div class="welcome-content">
      <h1 class="welcome-title">欢迎使用大明湖旅游系统</h1>
      <p class="welcome-subtitle">请登录以继续使用系统功能</p>

      <el-button type="primary" size="large" @click="goToLogin" class="login-button">
        前往登录
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 检查用户是否已登录，如果已登录则重定向到相应页面
onMounted(() => {
  if (userStore.isLoggedIn) {
    if (userStore.isAdmin()) {
      router.push('/admin')
    } else if (userStore.isVisitor()) {
      router.push('/visitor')
    }
  }
})

const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.welcome-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  }

  .welcome-content {
    text-align: center;
    background-color: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 90%;
}

.welcome-title {
  font-size: 28px;
  color: #303133;
  margin-bottom: 16px;
}

.welcome-subtitle {
  font-size: 16px;
  color: #606266;
  margin-bottom: 30px;
}

.login-button {
  padding: 12px 24px;
  font-size: 16px;
}
</style>
